<template name="_loginButtonsLoggedOutSingleLoginButton">
  <div class="login-text-and-button">
    <div class="login-button single-login-button {{#unless configured}}configure-button{{/unless}}"
         id="login-buttons-{{name}}">
      {{#if cannotConfigure}}
        <span class="">{{capitalizedName}} not configured</span>
      {{else}}
        <div class="login-image" id="login-buttons-image-{{name}}"></div>
        {{#if configured}}
          <span class="text-besides-image sign-in-text-{{name}}">Sign in with {{capitalizedName}}</span>
        {{else}}
            <span class="text-besides-image configure-text-{{name}}">Configure {{capitalizedName}} Login</span>
        {{/if}}
      {{/if}}
    </div>
  </div>
</template>

<template name="_loginButtonsLoggingInSingleLoginButton">
  <div class="login-text-and-button">
    {{> _loginButtonsLoggingIn}}
  </div>
</template>

<template name="_loginButtonsLoggedInSingleLogoutButton">
  <div class="login-text-and-button">
    <div class="login-display-name">
      {{displayName}}
    </div>
    <div class="login-button single-login-button" id="login-buttons-logout">Sign Out</div>
  </div>
</template>
